<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button>修改</button>
    <button>修改</button>
</div>
</body>
<script>
    // 1- reactive是一个函数
    // 2- reactive接收一个对象
    // 3- reactive返回一个Proxy实例
    const reactive = function (obj) {
        return new Proxy(obj,{
            get(target,key){
                return target[key];
            },
            set(target,key,newValue){

                target[key] = newValue;
                if(key==="userName"){
                    btns[0].innerText = newValue;
                }
                if(key==="age"){
                    btns[1].innerText = newValue;
                }
            }
        });
    }
    const info = reactive({
        userName: "zhangsan",
        age: 12
    });
    const btns = document.querySelectorAll("button");
    btns[0].innerText = info.userName;
    btns[1].innerText = info.age;
    btns[0].onclick = function(){
        info.userName += "!";
    }
    btns[1].onclick = function(){
        info.age += 2;
    }
</script>
</html>